<template>
	<page class="page" ref='page'>
		<!-- 建材商商城分类 -->
		<view class="select_box">
			<input type="text" v-model='title' confirm-typ="search" @confirm="page = 1;getCommodityList()" class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'/>
			<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
				<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
				<text>搜索</text>
			</view>
		</view>
		<view class="list_info">
			<scroll-view scroll-y="true" class="list_box" @scrolltolower="loadMore">
				<renovation-row :list='commodityList'  v-if="total > 0"  :page='page' :size='size' type='decorationMoneyExchange'/>
				<empty v-if='total == 0 && !loading '/>
			</scroll-view>
		</view>
	</page>
</template>

<script>
	import { getDGGoodsList } from '../static/api.js'
	import renovationRow from '@/components/renovation-row.vue'
	export default {
		components: {
			renovationRow
		},
		data(){
			return{
				title:'',
				isFocus:false,
				commodityList:[],
				page:1,
				size: 10,
				total:0,
				loading:false,
				duihuan:0,
			}
		},
		methods:{
			loadMore(){
				if(this.page * this.size >= this.total || this.loading) return
				this.page ++
				this.getCommodityList()
			},
			async getCommodityList(){
				if(this.page == 1)  uni.showLoading()
				this.loading = true
				try{
					var res = await getDGGoodsList({page:this.page,limit:this.size,nav_id:this.type,word:this.title,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',})
					this.commodityList  = this.page == 1 ?  res.list : [...this.classificationList,...res.list]
					this.total = res.count
					if(this.page == 1)  uni.hideLoading()
					this.loading = false
				}catch{
					this.loading = false
					uni.hideLoading()
				}
			},
		},
		onLoad(params){
			this.type = params.type
			if(params.typeName){
				this.typeName =  decodeURIComponent(params.typeName)
				uni.setNavigationBarTitle({
				    title: this.typeName
				});
			}
			
			if(params.duihuan != undefined){
				this.duihuan = params.duihuan;
				console.log(this.duihuan, '角色判断');
				
			}
			this.getCommodityList()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color:#fff;
	}
	.page {
		background-color: #fff;
	    flex: 1;
		display: flex;
	    flex-direction: column;
	    overflow: hidden;
		height: 100vh;
	  }
	.list_info{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.list_box{
		height: 100%;
		width: 100%;
		padding: 0 36rpx;
		box-sizing: border-box;
	}
	.select_box{
		position: relative;
		padding: 20rpx 36rpx;
		width: 100%;
		box-sizing: border-box;
		.select_text2{
			width: 100%;
			height: 66rpx;
			background: #f8faff;
			border-radius: 34rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color:#333;
			text-align: center;
			padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			line-height: 40rpx;
			color:#ADADAD;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
</style>
